<!--
@description：点餐历史
@author: whw
@date: 2021/6/23
-->
<template>
  <div class="main">
    <!-- 搜索筛选 -->
    <el-form :inline="true" :model="orderParams" class="user-search">
      <el-form-item>
        <el-date-picker
          v-model="searchTime"
          type="date"
          placeholder="选择日期"
          @change="changeTime"
        />
      </el-form-item>
      <el-form-item>
        <el-select
          v-model="orderParams.storeId"
          placeholder="请选择商家"
          clearable
        >
          <el-option
            v-for="store in stores"
            :key="store.storeId"
            :label="store.storeName"
            :value="store.storeId"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="success" class="startOrder" @click="openOrderLogin()">参与点餐</el-button>
      </el-form-item>
    </el-form>

    <!-- 历史订单列表 -->
    <el-table
      v-loading="loading"
      empty-text="暂无数据"
      border
      element-loading-text="拼命加载中"
      style="width: 100%;"
      class="history-table"
      :data="tableData.records"
    >
      <el-table-column
        align="center"
        prop="title"
        label="标题"
      >
        <template slot-scope="scope">
          <el-link type="primary" @click="openOrderDialog(scope.row.taskId)">{{ scope.row.title }}</el-link>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="storeName"
        label="商家"
      />
      <!-- 该字段是在获取数据时，根据开始和结束时间在前端修改的一个范围字段，数据库中不存在 -->
      <el-table-column
        align="center"
        prop="range"
        label="时间"
      />
      <el-table-column
        align="center"
        prop="foodNumber"
        label="菜品数量"
      >
        <template slot-scope="scope">
          <span style="font-weight: bold">{{ scope.row.foodNumber }}</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="foodPrice"
        label="菜品总价格(元)"
      >
        <template slot-scope="scope">
          <span style="font-weight: bold;color: red;">{{ scope.row.foodPrice.toFixed(2) }}</span>
        </template>
      </el-table-column>
      <!--      <el-table-column-->
      <!--        align="center"-->
      <!--        prop="totalPrice"-->
      <!--        label="总计"-->
      <!--      />-->
      <el-table-column
        align="center"
        label="操作"
      >
        <template slot-scope="scope">
          <el-link type="primary" icon="el-icon-view" @click="openHistoryDialog(scope.row)">详情</el-link>
          &nbsp;&nbsp;
          <el-link v-if="scope.row.status == 0" type="primary" icon="el-icon-dish" @click="continueOrder(scope.row.taskId)">继续点菜</el-link>
          &nbsp;&nbsp;
          <span v-if="scope.row.status == 1">无</span>
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
        :current-page="tableData.current"
        :page-sizes="[10, 15, 20]"
        :page-size="tableData.size"
        layout="sizes, prev, pager, next"
        :total="tableData.total"
        :hide-on-single-page="hide"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

    <!-- 详情页面 -->
    <orderInfoDialog
      v-if="orderDialogVisible"
      :order-dialog-visible="orderDialogVisible"
      :task-id="taskId"
      @close="closeOrderInfoDialog"
    />

    <!-- 历史点餐详情页面 -->
    <historyOrderDialog
      v-if="historyOrderVisible"
      :history-order-visible="historyOrderVisible"
      :task-id="taskId"
      :store-name="storeName"
      :is-expire="isExpire"
      @close="closeHistoryOrderDialog"
    />
    <!-- 点餐校验 -->
    <orderLogin
      v-if="orderLoginVisible"
      :order-login-visible="orderLoginVisible"
      @close="closeDialog"
    />

    <!-- 点过一次之后，如果想继续点菜，则可以直接跳过校验进入 -->
    <orderMain
      v-if="orderMainVisible"
      :task-id="taskId"
      :order-main-visible="orderMainVisible"
      @close="closeOrderMainDialog"
    />
  </div>
</template>

<script>
import { getList } from '@/api/meal/order'
import { list as listStore } from '@/api/basic/store'
import orderLogin from '@/views/meal/history/orderLogin'
import historyOrderDialog from '@/views/meal/history/historyOrderDialog'
import orderMain from '@/views/meal/history/orderMain'
import orderInfoDialog from '@/views/meal/order/orderInfoDialog'
export default {
  name: 'MealHistory',
  components: {
    orderLogin,
    historyOrderDialog,
    orderMain,
    orderInfoDialog
  },
  data() {
    return {
      totalPrice: null,
      hide: true,
      // 点餐校验
      orderLoginVisible: false,
      orderDialogVisible: false,
      historyOrderVisible: false,
      orderMainVisible: false,
      tableData: [],
      spanArr: [],
      position: null,
      // 搜索参数
      orderParams: {
        time: null,
        storeId: null,
        pageIndex: 1,
        pageSize: 15
      },
      searchTime: null,
      userData: [],
      loading: false,
      // 商家列表数据
      stores: [],
      // 子页面接收参数
      taskId: null,
      storeName: null,
      isExpire: 0
    }
  },
  created() {
    this.getList()
  },
  methods: {
    // 关闭详情页面
    closeOrderInfoDialog() {
      this.orderDialogVisible = false
    },
    // 打开订单详情页面
    openOrderDialog(taskId) {
      this.orderDialogVisible = true
      this.taskId = taskId
    },
    // 改变页大小
    handleSizeChange(val) {
      this.orderParams.pageSize = val
      this.getList()
    },
    // 改变当前页
    handleCurrentChange(val) {
      this.orderParams.pageIndex = val
      this.getList()
    },
    // 打开(继续)点菜页面
    continueOrder(taskId) {
      this.taskId = taskId
      this.orderMainVisible = true
    },
    // 关闭(继续)点菜页面
    closeOrderMainDialog(isRefresh) {
      this.taskId = null
      this.orderMainVisible = false
      if (isRefresh) {
        this.getList()
      }
    },
    // 关闭历史点餐详情页面
    closeHistoryOrderDialog(isRefresh) {
      this.historyOrderVisible = false
      this.taskId = null
      if (isRefresh) {
        this.getList()
      }
    },
    // 打开历史点餐详情页面
    openHistoryDialog(row) {
      this.historyOrderVisible = true
      this.isExpire = row.status
      this.storeName = row.storeName
      this.taskId = row.taskId
    },
    // 点击拷贝点餐码
    copyCode(taskId) {
      const copyData = taskId
      const oInput = document.createElement('input')
      oInput.value = copyData
      document.body.appendChild(oInput)
      oInput.select()
      document.execCommand('Copy')
      oInput.remove()
      this.$message.success('复制成功')
    },
    // 清空输入框
    clearInput() {
      this.orderParams.searchKey = null
    },
    // 打开点餐校验
    openOrderLogin() {
      this.orderLoginVisible = true
    },
    // 关闭点餐校验
    closeDialog(isRefresh) {
      this.orderLoginVisible = false
      if (isRefresh) {
        this.getList()
      }
    },
    // 搜索时间改变传值
    changeTime() {
      if (this.searchTime) {
        this.orderParams.time = this.searchTime
      } else {
        this.orderParams.time = null
      }
    },
    // 获取订单列表
    getList() {
      listStore().then(res => {
        if (res.code === 200) {
          this.stores = res.data
        }
      })
      // 获取订单分页列表
      getList(this.orderParams).then(res => {
        if (res.code === 200) {
          this.tableData = res.data
          // const that = this
          this.tableData.records.forEach(function(list, index) {
            list.range = list.createTime.substring(6) + ' ~ ' + list.endTime.substring(6)
          })
          // // 循环计算总价格
          // this.tableData.forEach(function(list1, i) {
          //   let sum = list1.price
          //   that.tableData.forEach(function(list2, j) {
          //     // 判断任务码相同，则价格相加
          //     if (list1.code === list2.code && list1.orderId !== list2.orderId) {
          //       sum += list2.price
          //     }
          //   })
          //   list1.totalPrice = sum
          // })
          // this.mergeTableList()
        }
      })
    },
    search() {
      this.loading = true
      // 获取订单分页列表
      getList(this.orderParams).then(res => {
        if (res.code === 200) {
          this.tableData = res.data
          // const that = this
          this.tableData.records.forEach(function(list, index) {
            list.range = list.createTime + ' ~ ' + list.endTime.substring(6)
          })
          // // 循环计算总价格
          // this.tableData.forEach(function(list1, i) {
          //   let sum = list1.price
          //   that.tableData.forEach(function(list2, j) {
          //     // 判断任务码相同，则价格相加
          //     if (list1.code === list2.code && list1.orderId !== list2.orderId) {
          //       sum += list2.price
          //     }
          //   })
          //   list1.totalPrice = sum
          // })
          // this.mergeTableList()
        }
      })
      this.loading = false
    }
    // 合并表格
    // objectSpanMethod({ row, column, rowIndex, columnIndex }) {
    //   // 列数发生变动时要手动调整
    //   if (this.OrderIndexArr && (columnIndex < 2 || columnIndex === 6)) {
    //     for (let i = 0; i < this.OrderIndexArr.length; i++) {
    //       const element = this.OrderIndexArr[i]
    //       for (let j = 0; j < element.length; j++) {
    //         const item = element[j]
    //         if (rowIndex === item) {
    //           if (j === 0) {
    //             return {
    //               rowspan: element.length,
    //               colspan: 1
    //             }
    //           } else if (j !== 0) {
    //             return {
    //               rowspan: 0,
    //               colspan: 0
    //             }
    //           }
    //         }
    //       }
    //     }
    //   }
    // },
    // 合并表格
    // mergeTableList() {
    //   this.OrderIndexArr = []
    //   const OrderObj = {}
    //   this.tableData.forEach((element, index) => {
    //     if (OrderObj[element.code]) {
    //       const nextItem = this.tableData[index + 1] ? this.tableData[index + 1].code : undefined
    //       const prevItem = this.tableData[index - 1].code ? this.tableData[index - 1].code : undefined
    //       if (element.code === nextItem) {
    //         OrderObj[element.code].push(index)
    //       } else if (element.code === prevItem) {
    //         OrderObj[element.code].push(index)
    //       }
    //     } else {
    //       OrderObj[element.code] = []
    //       OrderObj[element.code].push(index)
    //     }
    //   })
    //   // 将数组长度大于1的值 存储到this.OrderIndexArr（也就是需要合并的项）
    //   for (const k in OrderObj) {
    //     if (OrderObj[k].length > 1) {
    //       this.OrderIndexArr.push(OrderObj[k])
    //     }
    //   }
    // }
  }
}
</script>

<style lang="scss" scoped>
.main {
  width: 100%;
  height: 100%;
  background: #FFFFFF;
  margin-left: 10px;
  overflow: auto;
}
.user-search {
  margin-top: 20px;
}
.user {
  margin-left: 50%;
}
.el-link {
  font-size: 12px;
}
</style>
